<template>
	<view id="achievement">
		<view class="bg"></view>
		<view class="u-navbar">
			<view class="u-back-icon" @click="goBack"><my-icon name="back" size="28upx" style="color: #fff;"></my-icon></view>
			<view class="u-navbar-content-title">
				<view class="u-title u-line-1">打卡管理</view>
				<view class="srot" @click="goLink('setClock')"><my-icon name="set"></my-icon></view>
			</view>
		</view>
		<view class="stuTop">
			<view class="stuTopInfo">
				<image class="infoImg" src="../../static/online/clock_img.png"></image>
				<view class="topInfo">
					<view class="infoTit">今日任务：</view>
					<view class="infoNode">
						<template v-if="taskInfo.length > 0">
						<view class="infoNodeList">
							{{ taskInfo[nodeIndex].taskName }}
						</view>
						</template>
						<view v-else>未设置打卡任务</view>
					</view>
				</view>
				<view v-if="taskInfo.length > 0" class="clockIcon" @click="nextInfoNode"><my-icon name="youjiantou_dakaguanli"></my-icon></view>
			</view>
			<view class="stuAll">
				<view class="point"></view>
				<view class="stuTit">
					任务记录
					<text>共{{ total }}条</text>
				</view>
			</view>
		</view>
		<!-- 考试列表 -->
		<view class="examList">
			<my-an-item v-for="(paper, index) in list" :key="index" :itemName="paper.taskName" @click.native="gotoLink(paper.taskId, paper.taskDate)">
				<view slot="botLeft">
					<my-icon name="time"></my-icon>
					<text class="botTxt">任务时间：{{ paper.taskDate }}</text>
				</view>
				<view slot="botRight">
					<template v-if="paper.clockedUsers != paper.clockUsers">
						<text class="botTxt yellow">{{ paper.clockedUsers }}</text>
						人打卡
					</template>
					<template v-else>
						<text class="botTxt blue">全部打卡</text>
					</template>
				</view>
				<view slot="right" class="ft40">
					<view class="clockIcon"><my-icon name="youjiantou_dakaguanli"></my-icon></view>
				</view>
			</my-an-item>
			<my-empty v-if="emptyFalse" emptyTit="暂无考试"></my-empty>
		</view>
		<my-confirm ref="headBack" @cancel="backCancel()" @confirm="backSubmit()" confirm-text="我知道了" cancel-text="取消设置">
			<view class="subModal">
				<view class="subModalTit">
					温馨提示：
					<view>{{ choseTime }}打卡任务暂未生效哦~</view>
				</view>
			</view>
		</my-confirm>
		<my-confirm ref="headset" class="headset" :cancelshow="false" @confirm="backSubmit()" confirm-text="我知道了">
			<view class="subModal">
				<view class="subModalTit">
					温馨提示：
					<view>您还没有绑定班级或班级内无学生！</view>
				</view>
			</view>
		</my-confirm>
	</view>
</template>

<script>
export default {
	data() {
		return {
			taskInfo: {},
			nodeIndex:0,
			list: [],
			total:0,//总条数
			taskId: 0,
			status: 'loadmore',
			pageNo: 1,
			isLastPage: false,
			emptyFalse: false,
			choseTime: '', //打卡时间
			canCheck: 0 //是否可以打卡
		};
	},
	onLoad({ userid }) {
		this.userid = userid;
		this.init();
	},
	computed: {
		lastItem() {
			return function(value) {
				if (value) {
					return '交卷时间：' + value;
				}
			};
		}
	},
	onPullDownRefresh(){
		console.log(44)
		this.getInfo()
	},
	onReachBottom(){
		this.getInfo()
	},
	methods: {
		init() {
			this.list = [];
			this.taskInfo=[];
			this.pageNo = 1;
			this.isLastPage=false;
			return this.getInfo();
		},
		nextInfoNode(){
			//切换任务
			if(this.nodeIndex<this.taskInfo.length-1){
				this.nodeIndex++;
			}else{
				this.nodeIndex=0
			}
		},
		goLink(url) {
			uni.setStorageSync('clockTime', '');
			uni.setStorageSync('clockStorage', '');
			if (this.canCheck == 0) {
				//如果没有学生
				this.$nextTick(function() {
					this.$refs.headset.open();
				});
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		gotoLink(id, choseData) {
			var date = new Date();
			let month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
			let days = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
			const curData = date.getFullYear() + month.toString() + days;
			var reg = new RegExp('/', 'g');
			const choseD = choseData.replace(reg, '');
			this.choseTime = choseData.substring(5, 10).replace('/', '月') + '日';
			this.taskId = id;
			if (parseInt(curData) >= parseInt(choseD)) {
				//任务时间已结束
				uni.navigateTo({
					url: './clockDetail?taskId=' + id
				});
			} else {
				//任务时间还未到
				this.$nextTick(function() {
					this.$refs.headBack.open();
				});
			}
		},
		//取消设置
		backCancel() {
			return new Promise((resolve, reject) => {
				this.request.put(`/app/teacher/home/cancelClock/${this.taskId}`).then(res => {
					uni.showToast({
						duration: 1000,
						title: '取消成功！',
						icon: 'none'
					});
					this.$nextTick(function() {
						this.$refs.headBack.close();
					});
					this.init();
					resolve();
				});
			});
		},
		backSubmit() {
			this.$nextTick(function() {
				this.$refs.headBack.close();
				this.$refs.headset.close();
			});
		},
		getInfo() {
			if(this.isLastPage) return
			return new Promise((resolve, reject) => {
				this.request.post('/app/teacher/home/clockManage', { pageNo: this.pageNo }).then(res => {
					this.taskInfo =this.taskInfo.concat(res.todayTask);
					this.canCheck = res.canCheck;
					this.list = this.list.concat(res.tasks.list);
					this.total=res.tasks.total
					this.emptyFalse = this.list.length > 0 ? false : true;
					this.isLastPage = res.tasks.isLastPage;
					if (res.tasks.isLastPage) this.status = 'nomore';
					else this.pageNo++;
					resolve();
				});
			});
		},
		// 返回
		goBack() {
			uni.switchTab({
				url: '../home/home'
			});
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
#achievement {
	width: 100%;
	height: 100%;
	background-size: 100% auto;
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 376upx;
		border-radius: 0 0 0 150upx;
		z-index: 0;
		background: linear-gradient(to right, #c3b8ff, #9a77ff);
	}
	.u-title {
		color: #fff;
		text-align: center;
		font-size: 32upx;
	}
	.u-navbar {
		background: none !important;
		height: 44px;
		line-height: 44px;
		padding-top: 60upx;
	}
	.u-back-icon {
		position: absolute;
		padding: 0 30upx;
		z-index: 10;
	}
}
.examList {
	padding: 30upx;
	padding-top: 0;
	.paper-item {
		background: #fff;
		height: 160upx;
		border-radius: 18upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
		border-bottom: none;
		// padding: 30upx;
		margin-bottom: 20upx;
		/deep/.name {
			border-bottom: none;
		}
	}
}
.headset {
	/deep/.options {
		justify-content: center;
	}
}
.subModalTit {
	font-size: 34upx;
	margin-top: 25upx;
	line-height: 60upx;
}
.name_bot {
	text {
		margin-left: 0;
	}
}
/deep/.options {
	margin: 95upx 0 90upx;
}
.clockIcon {
	background: #eceef2;
	width: 36upx;
	height: 36upx;
	border-radius: 36upx;
	display: flex;
	justify-content: center;
	align-items: center;
	// margin-top: 62upx;
	.iconfont {
		color: #858993;
		font-size: 22upx;
		font-weight: normal;
		transform: scale(0.7);
	}
}
.u-navbar-content-title {
	position: relative;
	z-index: 1;
}
.srot {
	position: absolute;
	right: 30upx;
	top: 0;
	color: #fff;
	font-size: 30upx;
	z-index: 100;
	.iconfont {
		color: #fff;
		font-size: 36upx;
	}
}
.stuTop {
	margin-top: 20upx;
	// height: 340upx;
	margin-bottom: 20upx;
	position: relative;
	z-index: 1;
}
.empty {
	height: 65%;
	top: auto;
	bottom: 0;
	background: none;
}
.stuTopInfo {
	display: flex;
	justify-content: start;
	padding: 56upx 40upx;
	position: relative;
	.clockIcon{
		position: absolute;
		right: 40upx;
		bottom: 65upx;
	}
	.infoImg {
		width: 94upx;
		height: 109upx;
		margin-right: 20upx;
	}
	.topInfo {
		width: 500upx;
		color: #fff;
		.infoTit {
			font-size: 34upx;
			font-weight: 600;
			margin: 10upx 0;
		}
		.infoNode {
			font-size: 30upx;
			color: #fff;
			height: 35upx;
			line-height: 35upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
/deep/.box {
	border-bottom: 0;
}
.stuAll {
	width: 690upx;
	height: 100upx;
	padding: 0 30upx;
	background: #fff;
	border-radius: 18upx;
	margin: 0 auto;
	box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: start;
	align-items: center;
	.stuTit {
		color: #363940;
		font-size: 32upx;
		font-weight: 600;
		width: 600upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			font-size: 28upx;
			color: #a6a6a6;
			font-weight: normal;
		}
	}
	.point {
		width: 30upx;
		height: 30upx;
		border-radius: 30upx;
		background: rgba(249, 157, 46, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15upx;
	}
	.point::before {
		content: '';
		display: block;
		width: 14upx;
		height: 14upx;
		border-radius: 14upx;
		background: #f99d2e;
	}
}
.ft40 {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
